<template>
  <div v-if="data">
    <div style="width: 100%; background: #fff; padding: 12px 24px; margin-bottom: 10px">
      <a-page-header style="padding: 0" title="路线单详情" @back="$router.back()" />
    </div>
    <page-header-wrapper>
      <a-card :bordered="false" style="margin-bottom: 24px">
        <div class="flex">
          <div class="con">
            <a-descriptions :title="data.driver.line_name" :column="2">
              <a-descriptions-item label="配送司机"> {{ data.driver.name }} </a-descriptions-item>
              <a-descriptions-item label="车牌号码"> {{ data.driver.car_no }} </a-descriptions-item>
              <a-descriptions-item label="配送订单"> {{ data.lineOrderCount }}件 </a-descriptions-item>
              <a-descriptions-item label="配送时间">
                {{
                  data.driver_line.start_time > 0
                    ? $moment(data.driver_line.start_time * 1000).format('YYYY-MM-DD HH:mm:ss')
                    : '-'
                }}
              </a-descriptions-item>
              <a-descriptions-item label="完成时间">
                {{
                  data.driver_line.finish_time > 0
                    ? $moment(data.driver_line.finish_time * 1000).format('YYYY-MM-DD HH:mm:ss')
                    : '-'
                }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <div class="rig">
            <div class="print">
              <a-button type="primary" @click="handle('allPrint')">全部打印</a-button>
            </div>

            <div class="status">
              <h3>配送状态</h3>
              <strong>{{ getStatus(String(data.driver_line.status))[0] }}</strong>
            </div>
          </div>
        </div>
      </a-card>
      <a-card :bordered="false">
        <OrderListTable @handle="handle" :orderList="data.driver_line_order"></OrderListTable>
      </a-card>
    </page-header-wrapper>

    <a-modal title="打印" :visible="visible" @ok="visible = false" width="1000px" @cancel="visible = false">
      <template v-if="itemArr.length">
        <div class="popTit">
          <div class="tit">商品清单</div>
          <a-button type="primary" v-print="'#print'">打印</a-button>
        </div>
        <div id="print">
          <div :key="index" v-for="(item, index) of itemArr">
            <div class="orderNo">投篮单号：{{ item.line_no }}</div>

            <div class="popInfo">
              <div>
                <em>配送商家：{{ item.store_name }}</em>
                <em>联系电话：{{ item.store_tel }}</em>
              </div>
              <div>商家地址：{{ item.store_addr }}</div>
            </div>

            <table>
              <tr>
                <th width="80px">序号</th>
                <th width="50%">商品名称</th>
                <th>商品规格</th>
                <th width="80px">商品数量</th>
              </tr>

              <tr v-for="(el, i) of item.goods" :key="el.id">
                <th>{{ i + 1 }}</th>
                <th>
                  <div class="goodsName">{{ el.goods_name }}</div>
                </th>
                <th>{{ el.goods_attr_name }}</th>
                <th>{{ el.goods_num }}</th>
              </tr>
            </table>
          </div>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { driverLineInfo } from '@/api/driver'
import OrderListTable from './components/OrderListTable.vue'
import Template from '@/components/DiyNew/StorageSelect/Template.vue'

export default {
  components: {
    OrderListTable,
    Template,
  },

  data() {
    return {
      visible: false,
      data: null,
      list: [],
      id: 0,
      itemArr: [],
    }
  },

  mounted() {
    let { id } = this.$route.query
    this.id = id

    this.init()
  },

  computed: {
    getStatus() {
      return (status) => {
        let text, color
        switch (status) {
          case '0':
            text = '待配送'
            color = '#FAAD14'
            break

          case '1':
            text = '已完成'
            color = '#69CC20'
            break

          case '101':
            text = '配送中'
            color = '#1890FF'
            break
        }
        return [text, color]
      }
    },
  },

  methods: {
    handle(type, item) {
      switch (type) {
        case 'Print':
          this.itemArr = [item]
          this.visible = true
          break

        case 'allPrint':
          this.itemArr = this.data.driver_line_order
          this.visible = true
          break
      }
    },
    async init() {
      const hide = this.$message.loading('加载中', 0)

      const res = await driverLineInfo(this.id)
      if (res.code == 0) {
        let { driver, driver_line, driver_line_order, lineOrderCount } = res
        this.data = {
          driver,
          driver_line,
          driver_line_order,
          lineOrderCount,
        }
      }
      hide()
    },
  },
}
</script>

<style lang="less" scoped>
.flex {
  display: flex;

  .con {
    flex: 1;
  }

  .rig {
    text-align: right;
  }
}

.ml10 {
  margin-left: 10px;
}

.status {
  h3 {
    margin: 0;
    padding: 17px 0 7px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
  }

  strong {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.85);
  }
}

.popTit {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .tit {
    flex: 1;
    overflow: hidden;
    font-size: 24px;
    color: #000;
    font-weight: bold;
  }
}

.orderNo {
  padding-top: 20px;
  font-size: 14px;
  color: #000;
  font-weight: bold;
}

.popInfo {
  font-size: 14px;
  color: #000;

  div {
    padding-top: 10px;

    em {
      margin-right: 10px;
      font-style: normal;
    }
  }
}

table {
  margin-top: 20px;
  width: 100%;
  font-size: 14px;
  color: #000;
}

table th {
  height: 50px;
}

table th,
table td {
  border: 1px solid #000;
  text-align: center;
}

.goodsName {
  width: 400px;
}
</style>
